<template>
    <div id="body">
        <div class="pre-box">
            <div class="box">
                
            </div>
        </div>
        <canvas ref="canvas" class="canvas"></canvas>
    </div>
</template>

<script>
import { Calendar } from '@element-plus/icons-vue'

class Snowflake {
  constructor(x, y, speed, radius) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.radius = radius;
  }
  update() {
    this.y += this.speed;
    if (this.y > window.innerHeight) {
      this.y = -this.radius;
    }
  }
  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = '#ffffffb4';
    ctx.fill();
  }
}
export default {
    data() {
        return {
            activeName: "first",
            snowflakes: [],
            resizeTimer: null, // 添加一个 resizeTimer 变量
        };
    },
    mounted() {
        this.canvas = this.$refs.canvas;
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        window.addEventListener('resize', () => {
        clearTimeout(this.resizeTimer); // 清除之前的 resizeTimer
        this.resizeTimer = setTimeout(() => { // 使用 setTimeout 来限制 ResizeObserver 的触发频率
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
        }, 200); // 设置一个合适的延迟时间
        });
        this.animate();
    },
    methods: {
        animate() {
        this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
        if (Math.random() < 0.05) {
            const x = Math.random() * window.innerWidth;
            const y = -10;
            const speed = Math.random() * 3 + 1;
            const radius = Math.random() * 3 + 1;
            this.snowflakes.push(new Snowflake(x, y, speed, radius));
        }
        this.snowflakes.forEach((snowflake) => {
            snowflake.update();
            snowflake.draw(this.ctx);
        });
        requestAnimationFrame(this.animate);
        },
    },
};
</script>

<style scoped>
#body {
    display: flex;
    /* background-color: #fff; */
    align-items: center;
    justify-content: center;
}

.pre-box {
    width: 100%;
    height: 888px;
    background-size: cover;
    /* 设置页面阴影 */
    box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #16222a26;
  z-index: 0;
}

.box {
    width: 100%;
    /* background-color: #c392afa7; */
    border-radius: 10px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
    

</style>